import Card from "antd/es/card/Card";
import { Button, Checkbox, Form, Input, Select, Space, Spin, InputNumber, Table, DatePicker } from 'antd';
import React, { useEffect, useRef, useState } from 'react';
import _ from 'lodash';
import { useParams, useHistory } from 'react-router-dom';
import JcdHandle from "../../../../../../utils/apis/JcdHandle";
import FetchHelper from "../../../../../../utils/helper/fetch-helper";
import { useLocation } from "react-router-dom/cjs/react-router-dom.min";

export default function JcdEdit(props) {
  const [dynamicForms, setDynamicForms] = useState();
  const [idDatas, setIdDatas] = useState();
  const [loading, setLoading] = useState();
  const [form] = Form.useForm();
  const location = useLocation()?.state?.node;
  const data = location?.key ? location?.key : location;

  const [params, setParams] = useState({
    pageSize: 10,
    pageNum: 1,
    jcdlx: '河道'
  })
  const id = useParams()?.id;
  useEffect(() => {
    let promise;
    if (data === '河道') {
      promise = JcdHandle.hd_look()
    } else if (data === '雨情') {
      promise = JcdHandle.yq_look()
    } else if (data === '水库') {
      promise = JcdHandle.sk_look()
    } else if (data === '洪涝') {
      promise = JcdHandle.hl_look()
    } else if (data === '林区卡口') {
      promise = JcdHandle.lqkk_look()
    } else {
      promise = JcdHandle.gklwt_look()
    }
    promise.then(datas => {
      setDynamicForms(datas)
    })
  }, [data])

  useEffect(() => {
    if (params) {
      let promise;
      if (data === '河道') {
        promise = JcdHandle.hd_list(id)
      } else if (data === '雨情') {
        promise = JcdHandle.yq_list(id)
      } else if (data === '水库') {
        promise = JcdHandle.sk_list(id)
      } else if (data === '洪涝') {
        promise = JcdHandle.hl_list(id)
      } else if (data === '林区卡口') {
        promise = JcdHandle.lqkk_list(id)
      } else {
        promise = JcdHandle.gklwt_list(id)
      }
      promise.then(resp => {
        setIdDatas(resp.data)
        form.setFieldsValue({
          ...resp.data,
          // ...xqLookData
        })
      })
    }
  }, [id, form, params, data])

  const history = useHistory();
  const quxiaoHandle = () => {
    history.push(`/manager/jcsjxxcd`)
  }

  const onFinish = (values) => {
    for (const key in idDatas) {
      if (values.hasOwnProperty(key)) {
        idDatas[key] = values[key]
      }
    }
    let promise;
    if (data === '河道') {
      promise = FetchHelper.putJson(`/admin-api/ybyj/hdjc`, idDatas)
    } else if (data === '雨情') {
      promise = FetchHelper.putJson(`/admin-api/ybyj/yqjc`, idDatas)
    } else if (data === '水库') {
      promise = FetchHelper.putJson(`/admin-api/ybyj/skjc`, idDatas)
    } else if (data === '洪涝') {
      promise = FetchHelper.putJson(`/admin-api/ybyj/hljc`, idDatas)
    } else if (data === '林区卡口') {
      promise = FetchHelper.putJson(`/admin-api/ybyj/lqkkjcData`, idDatas)
    } else {
      promise = FetchHelper.putJson(`/admin-api/ybyj/gklwtjcData`, idDatas)
    }
    promise.then(resp => { alert("修改成功") }).catch(err => { alert("修改失败") })
  }
  return <div className='layout-h h100' style={{
    overflow: "scroll"
  }}>
    <Card className='h100 fill' style={{
      height: "1500px"
    }}>
      <Form method="post"
        onFinish={onFinish}
        form={form}>
        <header style={{
          fontSize: 20,
          fontWeight: "bold"
        }}>监测数据信息</header>
        <hr />

        <div className="InputForm" style={{
          display: "flex",
          flexWrap: "wrap"
        }}>
          {idDatas !== undefined && dynamicForms !== undefined && dynamicForms.map((formItem) => {
            let node;
            switch (formItem.type) {
              case 'select':
                node = <Select></Select>;
                break;
              case 'input':
              default:
                node = <Input style={{
                  width: "90%"
                }}
                  onChange={(e) => {

                  }}

                />
            }
            return <div style={{
              flexBasis: "33%",
              marginBottom: "10px"
            }}><Form.Item
              label={formItem.alias}
              name={formItem.name}

              rules={[
                {
                  required: true,

                }
              ]}

            >
                {node}
              </Form.Item></div>

          })}

        </div>


        <div className="layout-h">
          <Button className="btn1" type="primary"
            htmlType="submit"
          >保存</Button>

          <Button onClick={quxiaoHandle} className="btn2">返回</Button>
        </div>
      </Form>
    </Card>
  </div>
}